<template>
	<view class="container">
		<view class="top">
			<text class="title">审批分类:<text>{{processInsName}}</text></text>
			<text class="applicant">申请人:<text>{{command.creatorText}}</text></text>
			<text class="time">{{command.createTime}}</text>
		</view>
		<!-- 物资领用流程 -->
		<view class="materialData">
			<view class="material"  v-for="(item,index) in material" :key="index">
				<view><text>物资名称:<text>{{item.name}}</text></text></view>
				<view><text>数量:<text>{{item.quantity}}{{item.unit}}</text></text><text>单价:<text>{{item.unitPrice}}</text></text></view>
				<view><text>状态:<text>{{item.deliveryStateText}}</text></text></view>
			</view>
			<view class="reviewComments">
				<view><text>审核意见:</text></view>
				<hr>
				<scroll-view scroll-y="true" class="scrollview">
					<textarea class="textarea" maxlength="2000" placeholder="请输入审核意见"></textarea>
				</scroll-view>
			</view>
		</view>
		<view class="result">
			<view>
				<view :class="{fail:current==0}" @click="fail()">
					<text>不通过</text>
				</view>
				<view :class="{fail:current==1}" @click="adopt()">
					<text>通过</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				processInsName:'',
				flowNo:'',
				businessId:'',
				flowName:'',
				username:'',
				current:1,
				command: {
					creatorText:'无',
					createTime:'无',
					dirName:'无',
					assetName:'无',
					address:'无',
					changeAddress:'无',
				},
				material:[],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.businessId = option.businessId
			this.processInsName= option.processInsName
			this.flowNo=option.flowNo
			this.flowName=option.flowName
			// console.log(this.flowNo,this.businessId,this.processInsName, this.flowName)
			console.log(this.flowNo, this.flowName)
			this.materialRequisition()
		},
		methods: {
			async materialRequisition(){
				const res = await this.$myRequest({
					url: '/api-store/applyApproval/' + this.businessId,
					method: "get",
				})
				if (res.success == true) {
					this.command.createTime = res.body.command.createdTime
					this.command.creatorText = res.body.command.applicantIdText
					this.material = res.body.details
				}
			}
		}
	}
</script>

<style lang="scss">
	.top{
		width: 100%;
		height: 190rpx;
		background-color: #FFFFFF;
		.title{
			font-size: 28rpx;
			font-weight: bold;
			position: absolute;
			left: 65rpx;
			margin-top: 30rpx;
			text{
				margin-left: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #959595;
			}
		}
		.applicant{
			font-size: 28rpx;
			font-weight: bold;
			position: absolute;
			left: 65rpx;
			margin-top:  80rpx;
			text{
				margin-left: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #959595;
			}
		}
		.time{
			font-size: 28rpx;
			position: absolute;
			left: 65rpx;
			margin-top: 130rpx;
			color: #a6a6a6;
		}
	}
	.materialData{
		.material{
			width: 84%;
			height: 200rpx;
			border-radius: 10rpx;
			margin: 20rpx auto 0 auto;
			padding-left: 40rpx;
			padding-right: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #4d4d4d;
			background-color: #FFFFFF;
			view:nth-child(1){
				width: 100%;
				height: 50rpx;
				padding-top: 30rpx;
				line-height: 50rpx;
				text{
					text{
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #959595;
					}
				}
			}
			view{
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				display: flex;
				justify-content: space-between;
				text{
					width: 50%;
					text{
						left: 0;
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #959595;
					}
				}
			}
		}
		.reviewComments{
			width: 84%;
			height: 170px;
			font-size: 28rpx;
			font-weight: bold;
			border-radius: 10rpx;
			margin: 20rpx auto 0 auto;
			padding-left: 40rpx;
			padding-right: 20rpx;
			color: #4d4d4d;
			background-color: #FFFFFF;
			.textarea{
				width: 100%;
				height: 110px;
				font-size: 28rpx;
				font-weight: bold;
				color: #4d4d4d;
			}
			view{
				padding-top: 30rpx;
				width: 100%;
				height: 50rpx;;
				line-height: 50rpx;;
			}
			hr{
				width: 100%;
				height: 2px;
				border: 0;
				margin-bottom: 10rpx;
				background-color: #c3c7cc;
			}
		}
	}
	.result{
		width: 92%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 40rpx auto 50rpx  auto ;
		display: flex;
		justify-content: space-between;
		view{
			display: flex;
			width: 100%;
			view{
				margin: 0 ;
				padding: 0;
				width: 50%;
				border:1px solid;
				color: #109EF8;
				text{
					text-align: center;
					color: #109EF8;
					width: 100%;
				}
			}
			.fail{
				margin: 0 ;
				padding: 0;
				width: 50%;
				background-color: #109EF8;
				border:1px solid;
				color: #109EF8;
				text{
					text-align: center;
					color: #FFFFFF;
					width: 100%;
				}
			}
		}
	}
</style>
